<template>
  <el-dialog
    title="图标选择"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
    :append-to-body="true"
  >
    <el-tabs>
      <el-tab-pane
        v-for="(item, index) in iconItems"
        :label="item.title"
        :key="index"
      >
        <el-row style="height:400px;overflow-y:auto;overflow-x:hidden;">
          <el-col
            :span="1"
            v-for="(itemIcon, index1) in item.icon"
            :key="index1"
            style="margin:5px"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="'fa fa-' + itemIcon"
              placement="bottom"
            >
              <el-button size="mini" @click="getIcon(itemIcon)"
                ><i :class="'fa fa-' + itemIcon"></i
              ></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import iconItem from './data/index'
export default {
  data () {
    return {
      icon: '',
      dialogVisible: false,
      activeNames: ['1'],
      iconItems: []
    }
  },
  methods: {
    getIcon (value) {
      this.icon = value
      this.dialogVisible = false
      this.$emit('fromvisible', this.icon)
    },
    show () {
      this.iconItems = iconItem
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>
